<script lang="ts" setup>
// 引入 echarts
import { HourSegmentUseInfo } from '@/assets/api/electricitydataanalysisservice_0_0_1';
import { fitChartSize } from '@/utils/flex-size-utrils';
import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
// 创建 dom 的对象
const chart = ref<HTMLDivElement>();

// chart 的对象实例
let myChart: echarts.ECharts | undefined;

const props = defineProps<{
    hour_segment_use_datas: Array<HourSegmentUseInfo>
}>();

const datas: {
    series_data: Array<any>
} = {
    series_data: []
}

watch(() => props.hour_segment_use_datas, () => {
    datas.series_data = []
    // 构建字符串
    for (let ele of props.hour_segment_use_datas) {
        let name = `${ele.hour_segment.toString().padStart(2, "0")}`
        datas.series_data.push({
            value: ele.use,
            name: name,
        })
    }
    doRender()

});

const doRender = () => {
    let option = {
        // 设置标题
        title: [
            {
                text: '用电时间分布表',
                textStyle: {
                    fontSize: fitChartSize(14), // 标题的文字大小
                    color: "white"
                },
            }
        ],
        // 配置系列数据
        tooltip: {
            trigger: 'item',  // 触发类型为 'item'，表示悬停在项上时显示
            formatter: '{b} : {c} ({d}%)',  // 自定义显示格式
            show: true, // 设置为 true，默认悬停时显示
        },
        series: [
            {
                data: datas.series_data,
                type: 'pie',    // 系列类型为柱状图
                radius: ['40%', '80%'],
                name: '用电时间分布',
                label: {                    
                    show: false,  // 取消显示标签
                },
                itemStyle: {
                    opacity: 0.8,  // 设置饼图的透明度，模拟 3D 效果
                    shadowColor: 'rgba(0, 0, 0, 0.3)', // 添加阴影效果
                    shadowBlur: 10, // 阴影模糊度
                    shadowOffsetX: 5, // 阴影的横向偏移
                    shadowOffsetY: 5, // 阴影的纵向偏移
                },
                hoverAnimation: true,
                animationType: 'scale', // 动画效果
                animationEasing: 'elasticOut', // 弹性动画效果
                animationDuration: 1000, // 动画时长
            
            }
        ],
    };
    // 使用配置项生成图表
    myChart.setOption(option);
}
// 
const onHandlerWindowResize = () => {
    if (!myChart) {
        return;
    }
    // 重新设置字体大小   
    doRender();
    // 调整大小
    myChart.resize();
};

// 组件加载完成后加载的对象
onMounted(() => {
    // 固定用法，需要使用 chart.value
    myChart = echarts.init(chart.value);
    // 渲染出来
    doRender();
    // 监听窗口大小变化的事件
    window.addEventListener('resize', onHandlerWindowResize);
});
onBeforeUnmount(() => {
    // 组件销售时,退出监听
    window.removeEventListener('resize', onHandlerWindowResize);
});
</script>

<template>
    <!-- ref 是一个 就是获取到 dom 对象 -->
    <div class="year-revenu-chart-wrapper">
        <div ref="chart" class="year-revenu-chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.year-revenu-chart-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
    padding: vw(10);

    .year-revenu-chart {
        width: 100%;
        height: 100%;
        padding: vw(10);
        // 设置又名都
        background: rgba(42, 30, 55, 0.3);
    }
}
</style>